import * as React from 'react'
import './index.less'
import HomeHeader from './components/HomeHeader'
import {Store} from '../../store/types'
import {connect} from 'react-redux'
import actions from '../../store/actions/home'
import HomeSwiper from './components/HomeSwiper'
import HomeLessons from './components/HomeLessons'

import SwiperItem from './components/HomeSwiper/SwiperItems'

import SwiperDots from './components/HomeSwiper/SwiperDots'
import {loadMore,downFresh} from '../../util'


interface Props {
  category: string,
  setCategory:any,
  getSliders:any,
  sliders:string[],
  getLessons:any,
  lessons:any,
  refreshLessons:any

}
class Home extends React.Component<Props> {
  state = { selectedIndex: 0 }
  mainContent:any
  componentDidMount() {
    if(this.props.sliders.length>0){
      this.mainContent.scrollTop = sessionStorage.getItem('homeScrollTop') 
    }else{
      this.props.getSliders()
      this.props.getLessons()
    }
      loadMore(this.mainContent, this.props.getLessons)
      downFresh(this.mainContent, this.props.refreshLessons)
  }
  componentWillUnmount() {
    sessionStorage.setItem('homeScrollTop',this.mainContent.scrollTop)
  }
  render() {  
    let {category,setCategory,sliders,lessons,getLessons,refreshLessons} = this.props
    return ( 
      <React.Fragment>
        <HomeHeader
          category={category}
          setCategory={setCategory}
          refreshLessons={refreshLessons}
        />
        <div className="main-content" ref={element=>this.mainContent = element}>
          <div className="home-swiper">
            <HomeSwiper sliders={sliders}
          />
          </div>
         
          <HomeLessons lessons={lessons} getLessons={getLessons}/>
        </div>
      </React.Fragment>
     );
  }
}
 
export default connect(
  (state:Store):Store['home'] => state.home,
  actions
)(Home) ;